import React from 'react'
// 引入图片 css样式
import wxqq from '../../../static/img/LoginReg/wxqq.png';
import yzm from '../../../static/img/LoginReg/yzm.png';
import './index.css'
import { Form, Input, Button, Checkbox, message } from 'antd';
import axios from 'axios';
import { aUrl } from '../../../static/axios_url';
import { useNavigate } from 'react-router-dom';
export default function ForneLogin() {
    const navigate = useNavigate()
    const onFinish = (values) => {
        console.log(values);
        axios.post(aUrl+'/users/adduser', {
            u_phone:values.username,
            u_pass:values.password,
        }).then((res) => {
            if(res.data.code==1){
                message.success('注册成功')
                navigate('/login')
            }
        })
    };
    const onFinishFailed = (errorInfo) => {

        console.log('Failed:', errorInfo);
    };

    return (
        <div className='reg-login'>
            <ul>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 24,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    {/* 用户输入框 */}
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '手机号码不正确，请重新输入',
                            },
                        ]}
                        hasFeedback
                    >
                        <Input style={{ height: '42px' }} placeholder="请输入手机号" />
                    </Form.Item>


                    {/* 请输入密码 */}

                    <Form.Item name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码',
                            },
                        ]}>
                        <Input.Password style={{ height: '42px',  marginTop: '10px', marginBottom: '0px' }} placeholder="请输入密码(6-20位字符)" />
                    </Form.Item>

                    {/* 请再次输入密码 */}
                    <Form.Item name="password2"
                        rules={[
                            {
                                required: true,
                                message: '请在次输入密码',
                            },
                        ]}>
                        <Input.Password style={{ height: '42px',  marginTop: '10px', marginBottom: '0px' }} placeholder="请再次输入密码" />
                    </Form.Item>

                    {/* 验证码栏 */}
                    <Form.Item
                        name="regyzm"

                    >
                        <Input style={{ height: '42px', width: '111px' }} placeholder="验证码" />
                    </Form.Item>
                    <div className='reg-img'>
                        <img src={yzm} alt="" />
                        <span>看不清换一张</span>
                    </div>

                    {/* 手机获取验证码 */}
                    <div style={{ position: 'relative' }}>
                        <Form.Item name="forne">
                            <Input style={{
                                height: '42px',
                                marginTop: '30px', marginBottom: '10px'
                            }} placeholder="手机验证码" />
                        </Form.Item>
                        <button className='reg-hqy'>获取验证码</button>
                    </div>


                    {/* 自动登录忘记密码 */}
                    <Form.Item
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <div className='reg-dl'>
                            <Checkbox>我已阅读并同意《礼拜五协议》</Checkbox>
                        </div>
                    </Form.Item>
                    {/* 登录注册 */}
                    <div style={{
                        marginTop: '-40px'
                    }}>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button style={{
                                height: '45px', width: '133px', backgroundColor: '#f08200', borderRadius: '6px',
                                border: 'none',
                                marginLeft: '-102px'
                            }}
                                type="primary" htmlType="submit">
                                注册
                            </Button>
                            <button
                                style={{
                                    height: '45px', width: '133px', backgroundColor: '#498e3d', borderRadius: '6px',
                                    border: 'none',
                                    marginLeft: '40px',
                                    color: 'white'
                                }} >登录</button>
                        </Form.Item>
                    </div>
                </Form>
            </ul>
        </div>
    )
}
